{% extends "base.html" %}

{% block title %}{{ project.name }} - 开源安全创意工坊{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <!-- 项目信息 -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="mb-0">{{ project.name }}</h3>
                    {% if project.is_featured %}
                        <span class="badge bg-warning">
                            <i class="fas fa-star"></i> 优秀项目
                        </span>
                    {% endif %}
                </div>
            </div>
            <div class="card-body">
                <h5>项目描述</h5>
                <p>{{ project.description }}</p>
                
                <div class="row mt-4">
                    <div class="col-md-6">
                        <h6><i class="fas fa-users"></i> 团队成员</h6>
                        {% if project.team_members %}
                            {% set members = project.team_members|fromjson %}
                            {% for member in members %}
                                <span class="badge bg-secondary me-1 mb-1">{{ member }}</span>
                            {% endfor %}
                        {% else %}
                            <span class="text-muted">暂无成员信息</span>
                        {% endif %}
                    </div>
                    <div class="col-md-6">
                        <h6><i class="fas fa-calendar"></i> 创建时间</h6>
                        <p>{{ project.created_at.strftime('%Y年%m月%d日') }}</p>
                        
                        {% if project.github_url %}
                            <h6><i class="fab fa-github"></i> 代码仓库</h6>
                            <a href="{{ project.github_url }}" target="_blank" class="btn btn-sm btn-outline-dark">
                                <i class="fab fa-github"></i> 查看代码
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- 任务看板 -->
        <div class="card">
            <div class="card-header bg-success text-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-tasks"></i> 任务看板</h5>
                    <button class="btn btn-light btn-sm" onclick="showAddTaskModal()">
                        <i class="fas fa-plus"></i> 添加任务
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- 待办任务 -->
                    <div class="col-md-4">
                        <div class="task-column" data-status="todo">
                            <h6 class="text-center bg-light py-2 rounded">
                                <i class="fas fa-clipboard-list text-warning"></i> 待办 ({{ tasks|selectattr('status', 'equalto', 'todo')|list|length }})
                            </h6>
                            <div class="task-list" id="todo-tasks">
                                {% for task in tasks if task.status == 'todo' %}
                                    <div class="card mb-2 task-card" data-task-id="{{ task.id }}">
                                        <div class="card-body py-2">
                                            <h6 class="card-title mb-1">{{ task.title }}</h6>
                                            {% if task.description %}
                                                <p class="card-text small text-muted">{{ task.description }}</p>
                                            {% endif %}
                                            {% if task.assignee %}
                                                <small class="text-info">
                                                    <i class="fas fa-user"></i> {{ task.assignee }}
                                                </small>
                                            {% endif %}
                                            <div class="task-actions mt-2">
                                                <button class="btn btn-sm btn-outline-primary" onclick="moveTask({{ task.id }}, 'doing')">
                                                    <i class="fas fa-play"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-danger" onclick="deleteTask({{ task.id }})">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>

                    <!-- 进行中任务 -->
                    <div class="col-md-4">
                        <div class="task-column" data-status="doing">
                            <h6 class="text-center bg-light py-2 rounded">
                                <i class="fas fa-spinner text-primary"></i> 进行中 ({{ tasks|selectattr('status', 'equalto', 'doing')|list|length }})
                            </h6>
                            <div class="task-list" id="doing-tasks">
                                {% for task in tasks if task.status == 'doing' %}
                                    <div class="card mb-2 task-card" data-task-id="{{ task.id }}">
                                        <div class="card-body py-2">
                                            <h6 class="card-title mb-1">{{ task.title }}</h6>
                                            {% if task.description %}
                                                <p class="card-text small text-muted">{{ task.description }}</p>
                                            {% endif %}
                                            {% if task.assignee %}
                                                <small class="text-info">
                                                    <i class="fas fa-user"></i> {{ task.assignee }}
                                                </small>
                                            {% endif %}
                                            <div class="task-actions mt-2">
                                                <button class="btn btn-sm btn-outline-success" onclick="moveTask({{ task.id }}, 'done')">
                                                    <i class="fas fa-check"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-warning" onclick="moveTask({{ task.id }}, 'todo')">
                                                    <i class="fas fa-undo"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-danger" onclick="deleteTask({{ task.id }})">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>

                    <!-- 已完成任务 -->
                    <div class="col-md-4">
                        <div class="task-column" data-status="done">
                            <h6 class="text-center bg-light py-2 rounded">
                                <i class="fas fa-check-circle text-success"></i> 已完成 ({{ tasks|selectattr('status', 'equalto', 'done')|list|length }})
                            </h6>
                            <div class="task-list" id="done-tasks">
                                {% for task in tasks if task.status == 'done' %}
                                    <div class="card mb-2 task-card task-done" data-task-id="{{ task.id }}">
                                        <div class="card-body py-2">
                                            <h6 class="card-title mb-1">{{ task.title }}</h6>
                                            {% if task.description %}
                                                <p class="card-text small text-muted">{{ task.description }}</p>
                                            {% endif %}
                                            {% if task.assignee %}
                                                <small class="text-info">
                                                    <i class="fas fa-user"></i> {{ task.assignee }}
                                                </small>
                                            {% endif %}
                                            <div class="task-actions mt-2">
                                                <button class="btn btn-sm btn-outline-warning" onclick="moveTask({{ task.id }}, 'doing')">
                                                    <i class="fas fa-undo"></i>
                                                </button>
                                                <button class="btn btn-sm btn-outline-danger" onclick="deleteTask({{ task.id }})">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 侧边栏 -->
    <div class="col-lg-4">
        <!-- 项目操作 -->
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0"><i class="fas fa-cog"></i> 项目操作</h5>
            </div>
            <div class="card-body">
                <a href="{{ url_for('roadshow', project_id=project.id) }}" class="btn btn-success w-100 mb-2">
                    <i class="fas fa-file-pdf"></i> 生成路演海报
                </a>
                {% if project.github_url %}
                    <a href="{{ project.github_url }}" target="_blank" class="btn btn-dark w-100">
                        <i class="fab fa-github"></i> 查看代码仓库
                    </a>
                {% endif %}
            </div>
        </div>

        <!-- 项目统计 -->
        <div class="card">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-chart-pie"></i> 项目统计</h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-4">
                        <h4 class="text-warning">{{ tasks|selectattr('status', 'equalto', 'todo')|list|length }}</h4>
                        <small class="text-muted">待办</small>
                    </div>
                    <div class="col-4">
                        <h4 class="text-primary">{{ tasks|selectattr('status', 'equalto', 'doing')|list|length }}</h4>
                        <small class="text-muted">进行中</small>
                    </div>
                    <div class="col-4">
                        <h4 class="text-success">{{ tasks|selectattr('status', 'equalto', 'done')|list|length }}</h4>
                        <small class="text-muted">已完成</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加任务模态框 -->
<div class="modal fade" id="addTaskModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加新任务</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addTaskForm">
                    <div class="mb-3">
                        <label for="taskTitle" class="form-label">任务标题 <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="taskTitle" required>
                    </div>
                    <div class="mb-3">
                        <label for="taskDescription" class="form-label">任务描述</label>
                        <textarea class="form-control" id="taskDescription" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="taskAssignee" class="form-label">负责人</label>
                        <input type="text" class="form-control" id="taskAssignee" 
                               placeholder="选填，输入负责人姓名">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="addTask()">添加任务</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.task-column {
    min-height: 300px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 10px;
    background-color: #f8f9fa;
}

.task-card {
    cursor: move;
    transition: transform 0.2s;
}

.task-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.task-done {
    opacity: 0.7;
    background-color: #d4edda;
}

.task-actions {
    display: flex;
    gap: 5px;
}

.task-actions button {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
function showAddTaskModal() {
    new bootstrap.Modal(document.getElementById('addTaskModal')).show();
}

function addTask() {
    const title = document.getElementById('taskTitle').value.trim();
    const description = document.getElementById('taskDescription').value.trim();
    const assignee = document.getElementById('taskAssignee').value.trim();
    
    if (!title) {
        alert('请输入任务标题');
        return;
    }
    
    const taskData = {
        title: title,
        description: description,
        assignee: assignee,
        status: 'todo'
    };
    
    fetch(`/api/projects/{{ project.id }}/tasks`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(taskData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('添加任务失败，请重试');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('添加任务时发生错误');
    });
}

function moveTask(taskId, newStatus) {
    fetch(`/api/tasks/${taskId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ status: newStatus })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('更新任务状态失败');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('更新任务状态时发生错误');
    });
}

function deleteTask(taskId) {
    if (!confirm('确定要删除这个任务吗？')) {
        return;
    }
    
    fetch(`/api/tasks/${taskId}`, {
        method: 'DELETE'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('删除任务失败');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('删除任务时发生错误');
    });
}
</script>
{% endblock %}
